<template>
  <el-container class="head-container">
    <el-header>
      <!-- <img src="../assets/ccnu.png" alt="" height="50px" /> -->
      <el-page-header @back="goBack" content="xxx项目（这里是项目名称）">
      </el-page-header>
      <div>
        <i class="el-icon-bell"></i>
        <i class="el-icon-s-custom"></i>
      </div>
    </el-header>
    <!-- 页面主体区域 -->
    <el-tabs style="height: 1000px">
      <el-tab-pane>
        <span style="font-size: 20px" slot="label"
          ><i class="el-icon-date"></i>用户管理</span
        >
        <div class="container">
          <div class="main">
            <!-- 整个注册盒子 -->
            <div class="loginbox">
              <!-- 左侧的注册盒子 -->
              <div class="loginbox-in">
                <div class="userbox">
                  <span class="iconfont"></span>
                  <input
                    class="user"
                    id="user"
                    v-model="name"
                    placeholder="用户名"
                  />
                </div>
                <br />
                <div class="pwdbox">
                  <span class="iconfont"></span>
                  <input
                    class="pwd"
                    id="password"
                    v-model="pwd"
                    type="password"
                    placeholder="密码"
                  />
                </div>
                <br />
                <div class="pwdbox">
                  <span class="iconfont"></span>
                  <input
                    class="pwd"
                    id="re_password"
                    v-model="repwd"
                    type="password"
                    placeholder="确认密码"
                  />
                </div>
              </div>
              <!-- 右侧的注册盒子 -->
              <div class="background">
                <div class="title">Welcome to WH System Management Center</div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="用户管理">
        <span style="font-size: 20px" slot="label"
          ><i class="el-icon-date"></i>用户管理</span
        >
        配置管理</el-tab-pane
      >
    </el-tabs>
  </el-container>
</template> 

<script>
export default {
  name: "Programplus",
  components: {},
  data() {
    return {
      name: "",
      pwd: "",
      repwd: "",
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    goBack() {
      console.log("go back");
    },
  },
};
</script>
<style lang="less" scoped>
.head-container {
  height: 100%;
}
.login-container {
  margin-left: 100px;
  margin-right: 100px;
  box-shadow: 0px -1px 0px 0px #e5e5e5, /*上边阴影 */ -0.2px 0px 0px 0px #e5e5e5,
    /*左边阴影  */ 0.2px 0px 0px 0px #e5e5e5,
    /*右边阴影 */ 0px 1px 0px 0px #e5e5e5; /*下边阴影 */
}
.el-header {
  /*设置显示为flex布局 */
  display: flex;
  /* 设置为flex左右布局 */
  justify-content: space-between;
  /* 左右内边距为0 */
  padding-left: 0;
  /* 元素上下居中 */
  align-items: center;
  margin-bottom: 10px;
  //下边阴影
  box-shadow: 0px 1px 0px 0px #e5e5e5;
  // 内嵌的div样式
  > div {
    display: flex;
    align-items: center;
    > i {
      margin-left: 10px;
    }
  }
}
.loginbox {
  position: absolute;
  width: 800px;
  height: 400px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
